<!-- 
  class样式绑定案例
    -- 实现一个条形框，达到哪里亮了点哪里的效果
-->
<script setup>
  import { ref } from 'vue';
  const titles = ref([
    {id: 1, name: '京东秒杀'},
    {id: 2, name: '每日特价'},
    {id: 3, name: '品类秒杀'},
    {id: 4, name: '今日特惠'},
  ])
  const i = ref(0)
</script>

<template>
  <div>
    <nav class="nav-box">
      <a href="#" v-for="item, index in titles"
       :key="index"
       :class="{'on-click': index === i}"
       @click="i = index"
       >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>

<style scoped>
  .nav-box {
    border-top: 1px solid #cccc;
    border-bottom: 2px solid rgb(150, 16, 16);
  }
  a {
    display: inline-block;
    height: 50px;
    width: 130px;
    text-decoration: none;
    color: black;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
  }
  .on-click {
    background-color: rgb(127, 34, 34);
    color: aliceblue;
  }
</style>